<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>品牌列表</title>
        <style>
            .el-table .warning-row {
                background: oldlace;
            }

            .el-table .success-row {
                background: #f0f9eb;
            }
        </style>

    </head>
    <body>
        <div id="app">

            <!--顶部 搜索表单-->
            <el-form :inline="true" :model="brand" class="demo-form-inline">

                <el-form-item label="当前状态">
                    <el-select v-model="brand.status" placeholder="当前状态">
                        <el-option label="启用" value="1"></el-option>
                        <el-option label="禁用" value="0"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="品牌名称">
                    <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
                </el-form-item>

                <el-form-item label="企业名称">
                    <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
                </el-form-item>

                <el-form-item label="类别">
                    <el-select v-model="brand.typeId" placeholder="品牌类别">
                        <el-option v-for="item in allTypes" :key="item.typeId"
                                   :label="item.typeName"
                                   :value="item.typeId"
                        ></el-option>

                    </el-select>
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" @click="onSearch">查询</el-button>
                </el-form-item>
            </el-form>

            <!--按钮-->

            <el-row v-if="userType==1">

                <el-button type="danger" plain @click="batchDelete()">批量删除</el-button>
                <!-- 点击新增，显示新增对话框 -->
                <el-button type="primary" plain @click="dialogType=1, dialogVisible = true, dialogTitle='新增'">新增
                </el-button>

            </el-row>
            <!--添加数据对话框表单-->
            <el-dialog
                    :before-close="beforeClose"
                    :title="dialogTitle"
                    :visible.sync="dialogVisible"
                    width="30%">
                <!-- model实现双向绑定
                    绑定到了一个brand变量身上
                -->
                <el-form ref="form" :model="brand" label-width="80px">
                    <!-- 名称输入框 brandName属性相互绑定 -->


                    <el-form-item label="品牌名称">
                        <el-input v-model="brand.brandName"></el-input>
                    </el-form-item>

                    <el-form-item label="企业名称">
                        <el-input v-model="brand.companyName"></el-input>
                    </el-form-item>


                    <el-form-item label="排序">
                        <el-input v-model="brand.ordered"></el-input>
                    </el-form-item>

                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="brand.description"></el-input>
                    </el-form-item>

                    <el-form-item label="状态">
                        <el-switch v-model="brand.status"
                                   active-value="1"
                                   inactive-value="0"
                        ></el-switch>
                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" @click="addBrand()">提交</el-button>
                        <el-button @click="cancelAdd()">取消</el-button>
                    </el-form-item>
                </el-form>

            </el-dialog>


            <!--表格-->
            <template>
                <el-table
                        :data="myTableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>

                    <el-table-column
                            label="序号"
                            type="index"
                            width="50">
                    </el-table-column>

                    <el-table-column
                            prop="id"
                            label="品牌编号"
                            align="center"
                    >
                    </el-table-column>

                    <el-table-column
                            prop="brandName"
                            label="品牌名称"
                            align="center"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="companyName"
                            label="企业名称"
                            align="center"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="ordered"
                            align="center"
                            label="排序">
                    </el-table-column>
                    <el-table-column
                            prop="brandType.typeName"
                            align="center"
                            label="产品类别">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            align="center"
                            label="当前状态">
                        <template scope="scope">
                            <p v-if="scope.row.status ==1">启用</p>
                            <p v-if="scope.row.status ==0">禁用</p>
                        </template>
                    </el-table-column>
                    <!-- 单独的一列放修改，删除按钮-->
                    <el-table-column
                            align="center"
                            label="操作" v-if="userType==1">
                        <template slot-scope="scope">
                            <el-row>
                                <el-button type="primary" @click="onEdit(0,scope.row)">修改</el-button>
                                <el-button type="danger" @click="onDelete(scope.row)">删除</el-button>
                            </el-row>

                        </template>
                    </el-table-column>

                </el-table>
            </template>

            <!--分页工具条-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCnts">
            </el-pagination>

        </div>


        <script src="js/vue.js"></script>
        <script src="element-ui/lib/index.js"></script>
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <script src="js/axios-0.18.0.js"></script>

        <script>
            new Vue({
                el: "#app",
                methods: {
                    tableRowClassName({row, rowIndex}) {
                        if (rowIndex === 1) {
                            return 'warning-row';
                        } else if (rowIndex === 3) {
                            return 'success-row';
                        }
                        return '';
                    },
                    // 复选框选中后执行的方法
                    handleSelectionChange(val) {
                        var _this = this;
                        _this.multipleSelection = val;
                        // console.log(this.multipleSelection)
                    },
                    // 查询方法
                    onSubmit() {
                        console.log(this.brand);
                    },
                    // 添加数据
                    addBrand() {
                        var _this = this;
                        // 要提交的数据都在brand身上了， 可以用http请求 发送post请求  发给 servlet
                        // 根据当前是新增还是修改， 改变提交的servlet
                        var toUrl = "http://localhost:8080/brand-case/addBrand";
                        if (_this.dialogType == 0) {
                            toUrl = "http://localhost:8080/brand-case/updateBrand";

                        }
                        console.log("toUrl: " + toUrl)
                        // console.log(this.brand);
                        let token = localStorage.getItem("token");
                        axios({
                            method: "post",
                            url: toUrl,
                            headers: {
                                token: token
                            },
                            data: this.brand,
                            // data:JSON.toString(this.brand),
                        }).then(resp => {
                            let s = JSON.stringify(resp.data);
                            let parse = JSON.parse(s);
                            _this.barnd = {};
                            _this.dialogVisible = false;
                            if (parse.code == 200) {
                                _this.selectAll();
                                _this.$message({
                                    message: '添加成功',
                                    type: 'success'
                                });
                            } else if (parse.code == 403) {
                                _this.$message({
                                    message: '非法访问',
                                    type: 'error'
                                });
                            }

                        })
                    },

                    cancelAdd() {
                        this.dialogVisible = false;
                        this.brand = {};
                    },
                    // 模糊查询
                    onSearch() {
                        var _this = this;
                        _this.currentPage = 1;
                        axios({
                            method: "post",
                            url:
                                `http://localhost:8080/brand-case/SelectAllServlet?pageNo=${_this.currentPage}&cntPerPage=${_this.pageSize}`,
                            data: _this.brand
                        }).then(resp => {
                            // 收到server的返回数据 JSON
                            _this.myTableData = resp.data.brands;
                            _this.totalCnts = resp.data.cnt;
                        })
                    },
                    // 修改  0:修改 1：新增
                    onEdit(type, row) {
                        var _this = this;
                        _this.dialogType = type;
                        _this.dialogTitle = '修改';
                        _this.dialogVisible = true;
                        console.log(row)
                        _this.brand = row

                    },
                    // 删除
                    onDelete(row) {
                        console.log(row.id)
                        var _this = this;
                        // 要提交的数据都在brand身上了， 可以用http请求 发送post请求  发给 servlet
                        let token = localStorage.getItem("token");
                        axios({
                            method: "get",
                            url: "http://localhost:8080/brand-case/delete?id=" + row.id,
                            headers: {
                                token: token
                            },

                        }).then(resp => {
                            // console.log("my response: " + resp);
                            // console.log(JSON.toString(this.brand))
                            console.log(resp.data);
                            _this.selectAll();

                        })
                    },
                    // 批量删除
                    batchDelete() {
                        var _this = this;
                        let arrIDs = [];
                        for (let i = 0; i < _this.multipleSelection.length; i++) {
                            arrIDs[i] = _this.multipleSelection[i].id;
                        }
                        console.log(arrIDs);

                        axios({
                            method: "post",
                            url: "http://localhost:8080/brand-case/batchDel",
                            data: arrIDs
                        }).then(resp => {
                            // 判断响应数据是否为 success
                            let s = JSON.stringify(resp.data)
                            let data = JSON.parse(s);
                            console.log(data.code)

                            if (data.code == 200) {
                                _this.$message({
                                    message: '操作成功',
                                    type: 'success'
                                });
                                //重新获取 所有数据
                                _this.selectAll()
                            } else {
                                _this.$message({
                                    message: '操作失败',
                                    type: 'fail'
                                });
                            }
                        })
                    },
                    beforeClose(done) {
                        this.brand = {};
                        done();
                    },
                    // 当页面点击页数,第几页 变化时触发的函数
                    handleSizeChange(val) {
                        console.log(`每页 ${val} 条`);
                        var _this = this;
                        _this.pageSize = val;
                        axios({
                            method: "post",
                            url:
                                `http://localhost:8080/brand-case/SelectAllServlet?pageNo=${_this.currentPage}&cntPerPage=${val}`,
                            data: _this.brand
                        }).then(resp => {
                            // 收到server的返回数据 JSON
                            _this.myTableData = resp.data.brands;
                            _this.totalCnts = resp.data.cnt;
                        })
                    },
                    handleCurrentChange(val) {
                        console.log(`当前页: ${val}`);
                        var _this = this;
                        _this.currentPage = val;
                        axios({
                            method: "post",
                            url:
                                `http://localhost:8080/brand-case/SelectAllServlet?pageNo=${val}&cntPerPage=${_this.pageSize}`,
                            data: _this.brand
                        }).then(resp => {
                            // 收到server的返回数据 JSON
                            _this.myTableData = resp.data.brands;
                            _this.totalCnts = resp.data.cnt;
                        })
                    },
                    // 查询所有
                    selectAll() {
                        var _this = this;
                        _this.currentPage = 1;
                        axios({
                            method: "post",
                            url: "http://localhost:8080/brand-case/SelectAllServlet",
                            data: _this.brand
                        }).then(resp => {
                            _this.myTableData = resp.data.brands;
                            _this.totalCnts = resp.data.cnt;
                        })
                    },
                    // 查询所有类型
                    selectAllTypes() {
                        var _this = this;
                        axios({
                            method: "post",
                            url: "http://localhost:8080/brand-case/allTypes",
                        }).then(resp => {
                            _this.allTypes = resp.data;
                        })
                    }

                },
                mounted() {
                    //提取本地存储的用户类型
                    this.userType = localStorage.getItem("userType");

                    console.log("userType: " + this.userType)
                    // 当页面加载完成后，发送异步请求，获取数据
                    this.selectAll();
                    this.selectAllTypes();
                },
                data() {
                    return {
                        // 添加数据对话框是否展示的标记  默认不显示新增的对话框
                        dialogVisible: false,
                        dialogTitle: '',
                        // 当前页码
                        currentPage: 1,
                        // 每页条数
                        pageSize: 10,
                        // 总记录条数
                        totalCnts: 30,
                        userType: 0,
                        // 品牌模型数据  和 新增对话框 ，你输入的信息，会被保存到brand变量 属性上
                        brand:
                            {
                                status: '',
                                brandName: '',
                                companyName: '',
                                id: "",
                                ordered: "",
                                description: ""
                            },
                        // 复选框选中数据集合
                        // multipleSelection: [],
                        // 表格数据
                        myTableData: [],
                        allTypes: []
                    }
                }
            })

        </script>

    </body>
</html>